<template>
	<breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
	<div class="table-wrapped">
		<!-- 顶部 -->
		<div class="table-top">
			<!-- 表格顶部 -->
			<div class="table-header">
				<div class="search-wrapped">
					<el-input v-model="adminAccount" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
						:prefix-icon="Search" @change="searchAdmin()" />
				</div>
				<div class="button-wrapped">
					<el-button type="primary" @click="openCreate(1)">添加产品管理员</el-button>
				</div>
			</div>
			<!-- 表格内容 -->
			<div class="table-content">
				<el-table :data="tableData" style="width: 100%" border>
					<el-table-column type="index" width="50" />
					<el-table-column prop="account" label="账号" />
					<el-table-column prop="name" label="姓名" />
					<el-table-column prop="sex" label="性别" />
					<el-table-column prop="department" label="部门" />
					<el-table-column prop="email" label="邮箱" />
					<el-table-column prop="update_time" label="更新时间" />
					<el-table-column prop="status" label="状态" />
					<el-table-column label="操作" width="200px">
						<template #default="{row}">
							<div>
								<el-button type="success" @click="openEdit(row.id)">编辑</el-button>
								<el-button type="danger" @click="openDelete(row.id)">删除</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 底部 -->
		<div class="table-footer">
			<el-pagination :page-size="1" :current-page="paginationData.currentPage" :pager-count="7"
				:page-count="paginationData.pageCount" layout="prev, pager, next" :total="adminTotal"
				@current-change="currentChange" />
		</div>
	</div>
	<create ref="Create" @success="getAdmimlist"></create>
	<edit ref="Edit" @success="getAdmimlist"></edit>
	<deleteA ref="Delete" @success="getAdmimlist"></deleteA>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { Search } from '@element-plus/icons-vue'
	import breadCrumb from '@/components/bread_crumb.vue'
	import create from '../components/create_admin.vue';
	import edit from '../components/edit_admin.vue';
	import deleteA from '../components/delete_admin.vue';
	import { bus } from "@/utils/mitt.js"
	import { searchUser, getAdminListLength, returnListData } from '@/api/userinfo.js'
	import { async } from 'fast-glob';



	const breadcrumb = ref()

	const item = ref({
		first: '产品管理员',
	})
	// 搜索框的数据
	const adminAccount = ref<number>()

	// 表格内容
	const tableData = ref([])



	const searchAdmin = async () => {
		const res = await searchUser(adminAccount.value)
		tableData.value = res.result
	}

	const paginationData = reactive({
		// 总页数
		pageCount: 1,
		// 当前页
		currentPage: 1
	})

	const adminTotal = ref<number>(0)

	// 获取产品管理员的数量
	const getAdminListlength = async () => {
		const res = await getAdminListLength('产品管理员')
		adminTotal.value = res.length
		paginationData.pageCount = Math.ceil(res.length / 10)
	}
	getAdminListlength()

	// 默认获取第一页的数据
	const getFirstPageList = async () => {
		tableData.value = await returnListData(0, '产品管理员')
	}
	getFirstPageList()

	// 监听换页
	const currentChange = async (value : number) => {
		console.log(value)
		tableData.value = await returnListData(value - 1, '产品管理员')
		paginationData.currentPage = value
	}

	// 获取管理员列表
	const getAdmimlist = () => {
		getAdminListlength()
	}
	getAdmimlist()

	// 创建管理员
	const Create = ref()
	const openCreate = (id : number) => {
		bus.emit('createId', id)
		Create.value.open()
	}
	// 编辑管理员
	const Edit = ref()
	const openEdit = (id : number) => {
		bus.emit('editId', id)
		Edit.value.open()
	}

	// 降级管理员 openDelete
	const Delete = ref()
	const openDelete = (id : number) => {
		bus.emit('deleteId', id)
		Delete.value.open()
	}
</script>

<style lang="scss" scoped>
	.table-wrapped {
		padding: 8px;
		height: calc(100vh - 101px);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.table-top {
			.table-header {
				padding: 0 24px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 48px;
				background: #fff;

			}
		}

		.table-footer {
			display: flex;
			justify-content: flex-end;
		}
	}

	:deep(.el-input__wrapper) {
		height: 32px;
		padding: 0 15px;
	}
</style>